/*
 * @Author: your name
 * @Date: 2021-12-28 11:31:58
 * @LastEditTime: 2021-12-28 15:02:04
 * @LastEditors: LAPTOP-L472H14P
 * @Description: In User Settings Edit
 * @FilePath: \react-dnd-demo\src\Components\CardDrop\CardDrop.js
 */
import React, { Component } from 'react';
import CardDropItem from './Card';
export default class CardDrop extends Component {
  state = {
    cardList: [
      {
        title: '卡片1',
        bodyContent: '卡片区域1内容',
        id: 1,
      },
      {
        title: '卡片2',
        bodyContent: '卡片区域2内容',
        id: 2,
      },
      {
        title: '卡片3',
        bodyContent: '卡片区域3内容',
        id: 3,
      },
      {
        title: '卡片4',
        id: 4,
        bodyContent: '卡片区域4内容',
      },
      {
        title: '卡片5',
        bodyContent: '卡片区域5内容',
        id: 5,
      },
      {
        title: '卡片6',
        bodyContent: '卡片区域6内容',
        id: 6,
      },
    ],
  };
  appStyles = {
    display: 'flex',
    height: '100%',
    justifyContent: 'space-around',
    padding: 30,
    backgroundColor: '#ececec',
    flexWrap: 'wrap',
    margin: '50px',
    alignItems: 'center',
  };
  setPosition = (sourceId, TargetId) => {
    const { cardList } = this.state;
    const sourceIndex = cardList.findIndex((d) => d.id === sourceId);
    const TargetIndex = cardList.findIndex((d) => d.id === TargetId);
    const tempData = cardList.splice(sourceIndex, 1);
    cardList.splice(TargetIndex, 0, tempData[0]);
    this.setState({
      cardList,
    });
  };
  render() {
    const { cardList } = this.state;
    return (
      <div style={this.appStyles}>
        {cardList.map((d) => (
          <CardDropItem item={d} key={d.id} setPosition={this.setPosition} />
        ))}
      </div>
    );
  }
}
